<template>
  <div>
    <basic-container>
      <div>
        <div>
          <div style="margin-bottom: 10px;">
            <el-button type="primary" @click="newBtn">新增</el-button>
            <el-button type="primary" @click="copyBtn">复制</el-button>
          </div>
          <el-table :data="nameTableData" v-loading="loadingFrom">
            <el-table-column prop="templateName" label="模板名称" align="center"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
            <el-table-column prop="createUserName" label="创建人" align="center"></el-table-column>
            <el-table-column
              prop="isZmb"
              header-align="center"
              align="center"
              min-width="100"
              label="主模板"
            >
              <template slot-scope="scope">
                <el-switch
                  v-if="scope.row.isEffective == '1'"
                  :active-value="1"
                  :inactive-value="0"
                  v-model="scope.row.isZmb"
                  active-color="#17499a"
                  inactive-color="#999999"
                  @change="stateChange(scope.row)"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="isEffective" label="有效性" align="center">
              <template slot-scope="scope">
                <i v-if="scope.row.isEffective == 1" style="color: green;" class="el-icon-circle-check"></i>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200px" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="edit(scope.row)">编辑</el-button>
                <el-button type="text" @click="delBtn(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-dialog
          width="30%"
          title="复制模板"
          :visible.sync="innerVisible"
          append-to-body
        >
          <el-form :model="detailForm" ref="ruleForm" :rules="rules" label-width="120px" style="display:flex">
            <el-form-item label="模板名称" prop="templateName">
              <el-input v-model="detailForm.templateName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain @click="detailCopy('ruleForm')">确定</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <el-dialog
          :title="dialogtitle"
          :visible.sync="mbstepsDialogVisible"
          width="80%"
        >
          <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="120px" style="display:flex" :inline="true">
            <el-form-item label="模板名称" prop="templateName" style="width:22%">
              <el-input v-model="ruleForm.templateName"></el-input>
            </el-form-item>
            <el-form-item style="width:22%">
              <el-button type="primary" plain @click="submitForm('ruleForm')">确定</el-button>
            </el-form-item>
          </el-form>
          <div style="display: block;margin-top: -54px;float: right;" v-if="tableData.length>1">
            <el-button type="primary" plain @click="saveBtn" v-loading.fullscreen.lock="fullscreenLoading2">模板保存</el-button>
            <el-button type="primary" plain @click="copyBtnDtail" v-loading.fullscreen.lock="fullscreenLoading2">复制</el-button>
          </div>
          <div  v-loading="loading">
            <div class="tiao_lc"  style="margin-bottom: 20px;" v-if="tableData.length>1">
              流程图
            </div>
            <div class="bg_tiao" v-if="tableData.length>1"></div>
            <div style="display:flex; justify-content:space-between ;width:100%;z-index: 8; position: sticky;" v-if="tableData.length>1">
              <div class="text_dh">
                <div style="color:#0762c3;margin:0 27px">开始</div>
                <img class="imgs" src="./start.png" alt="" @click="editmbsteps('该节点无配置')">
              </div>
              <div class="text_dh">
                <div style="color:#0762c3;margin:0 9px">奖金管理员提交</div>
                <div class="chenck_active" @click="editmbsteps('该节点无配置')"><i class="el-icon-check checked2"></i></div>
              </div>
              <div class="text_dh">
                <div style="color:#0762c3;margin:0 9px">部门审批</div>
                <div>
                  <div class="chenck_active" v-if="from1.isjump" @click="editmbsteps('部门审批')"><i class="el-icon-check checked2"></i></div>
                  <div v-else class="point" @click="editmbsteps('该节点无配置')"></div>
                </div>
                <el-checkbox v-model="from1.isjump" @change="valueChange(from1)">启用</el-checkbox>
              </div>
              <div class="text_dh">
                <div style="color:#0762c3">领导审批</div>
                <div>
                  <div class="chenck_active" v-if="from4.isjump" @click="editmbsteps('领导审批')"><i class="el-icon-check checked2"></i></div>
                  <div v-else class="point" @click="editmbsteps('该节点无配置')"></div>
                </div>
                <el-checkbox v-model="from4.isjump" @change="valueChange(from4)">启用</el-checkbox>
              </div>
<!--              <div class="text_dh">
                <div style="color:#0762c3">考核委员会审核</div>
                <div>
                  <div  class="chenck_active" v-if="from5.isjump" @click="editmbsteps('考核委员会审核')"><i class="el-icon-check checked2"></i></div>
                  <div v-else class="point" @click="editmbsteps('该节点无配置')"></div>
                </div>
                <el-checkbox v-model="from5.isjump" :disabled ="disabled" @change="valueChange(from5)">启用</el-checkbox>
              </div>-->
              <div class="text_dh">
                <div style="color:#0762c3">方案确认</div>
                <div>
                  <div  class="chenck_active" v-if="from5.isjump" @click="editmbsteps('方案确认')"><i class="el-icon-check checked2"></i></div>
                  <div v-else class="point" @click="editmbsteps('该节点无配置')"></div>
                  <el-checkbox v-model="from5.isjump" :disabled ="disabled"  @change="valueChange(from5)">启用</el-checkbox>
                </div>
              </div>
              <div class="text_dh">
                <div style="color:#0762c3;margin:0 27px;">结束</div>
                <img class="imgs" src="./end.png" alt="" @click="editmbsteps('该节点无配置')">
              </div>
            </div>
            <div class="tiao_lc" style="margin-top: 20px; margin-bottom: 20px;" v-if="showType == '方案确认'||showType == '领导审批'||showType == '部门审批'||showType == '考核委员会审核'||showType=='请点击节点进行配置'||showType == '该节点无配置'">
              {{showType}}
            </div>
            <div class="mb_bottom"  v-if="tableData.length>1">
              <el-form ref="form" :model="from2" label-width="170px" :inline="true"  class="form-inline" v-if="showType == '方案确认'||showType == '领导审批'||showType == '部门审批'||showType == '考核委员会审核'">

                <el-form-item label="部门审批类型:"  v-if="showType == '部门审批'">
                  <el-select v-model="from1.tagType" placeholder="请选择" @change="valueChange(from1)">
                    <el-option
                      v-for="item in wboptions"
                      :label="item.label"
                      :key="item.value"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="部门审批人员："  v-if="showType == '部门审批'">
                  <el-button plain type="primary"  @click="choosePer(from1)">选择</el-button>
                </el-form-item>

                <el-form-item label="领导审批类型:"  v-if="showType == '领导审批'">
                  <el-select v-model="from4.tagType" placeholder="请选择" @change="valueChange(from4)">
                    <el-option
                      v-for="item in wboptions"
                      :label="item.label"
                      :key="item.value"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="领导审批审批人："  v-if="showType == '领导审批'">
                  <el-button plain type="primary"  @click="choosePer(from4)">选择</el-button>
                </el-form-item>

<!--                <el-form-item label="考核委员会审批类型:" v-if="showType == '考核委员会审核'">
                  <el-select v-model="from5.tagType" placeholder="请选择" @change="valueChange(from5)">
                    <el-option
                      v-for="item in wboptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="考核委员会人员：" v-if="showType == '考核委员会审核'">
                  <el-button plain type="primary"  @click="choosePer(from5)">选择</el-button>
                </el-form-item>-->

                <el-form-item label="方案确认人："  v-if="showType == '方案确认'">
                  <el-button plain type="primary"  @click="choosePer(from5)">选择</el-button>
                </el-form-item>
<!--                <el-form-item label="是否可申诉:" v-if="showType == '方案确认'">
                  <el-select v-model="from6.isauto" placeholder="请选择" @change="valueChange(from6)">
                    <el-option
                      v-for="item in options"
                      :label="item.label"
                      :key="item.value"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>-->
              </el-form>

              <div class="text_dh" v-else>
                <svg width="150" viewBox="0 0 79 86" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="linearGradient-1-1" x1="38.8503086%" y1="0%" x2="61.1496914%" y2="100%"><stop stop-color="#FCFCFD" offset="0%"></stop><stop stop-color="#EEEFF3" offset="100%"></stop></linearGradient><linearGradient id="linearGradient-2-1" x1="0%" y1="9.5%" x2="100%" y2="90.5%"><stop stop-color="#FCFCFD" offset="0%"></stop><stop stop-color="#E9EBEF" offset="100%"></stop></linearGradient><rect id="path-3-1" x="0" y="0" width="17" height="36"></rect></defs><g id="Illustrations" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="B-type" transform="translate(-1268.000000, -535.000000)"><g id="Group-2" transform="translate(1268.000000, 535.000000)"><path id="Oval-Copy-2" d="M39.5,86 C61.3152476,86 79,83.9106622 79,81.3333333 C79,78.7560045 57.3152476,78 35.5,78 C13.6847524,78 0,78.7560045 0,81.3333333 C0,83.9106622 17.6847524,86 39.5,86 Z" fill="#F7F8FC"></path><polygon id="Rectangle-Copy-14" fill="#E5E7E9" transform="translate(27.500000, 51.500000) scale(1, -1) translate(-27.500000, -51.500000) " points="13 58 53 58 42 45 2 45"></polygon><g id="Group-Copy" transform="translate(34.500000, 31.500000) scale(-1, 1) rotate(-25.000000) translate(-34.500000, -31.500000) translate(7.000000, 10.000000)"><polygon id="Rectangle-Copy-10" fill="#E5E7E9" transform="translate(11.500000, 5.000000) scale(1, -1) translate(-11.500000, -5.000000) " points="2.84078316e-14 3 18 3 23 7 5 7"></polygon><polygon id="Rectangle-Copy-11" fill="#EDEEF2" points="-3.69149156e-15 7 38 7 38 43 -3.69149156e-15 43"></polygon><rect id="Rectangle-Copy-12" fill="url(#linearGradient-1-1)" transform="translate(46.500000, 25.000000) scale(-1, 1) translate(-46.500000, -25.000000) " x="38" y="7" width="17" height="36"></rect><polygon id="Rectangle-Copy-13" fill="#F8F9FB" transform="translate(39.500000, 3.500000) scale(-1, 1) translate(-39.500000, -3.500000) " points="24 7 41 7 55 -3.63806207e-12 38 -3.63806207e-12"></polygon></g><rect id="Rectangle-Copy-15" fill="url(#linearGradient-2-1)" x="13" y="45" width="40" height="36"></rect><g id="Rectangle-Copy-17" transform="translate(53.000000, 45.000000)"><mask id="mask-4-1" fill="white"><use xlink:href="#path-3-1"></use></mask><use id="Mask" fill="#E0E3E9" transform="translate(8.500000, 18.000000) scale(-1, 1) translate(-8.500000, -18.000000) " xlink:href="#path-3-1"></use><polygon id="Rectangle-Copy" fill="#D5D7DE" mask="url(#mask-4-1)" transform="translate(12.000000, 9.000000) scale(-1, 1) translate(-12.000000, -9.000000) " points="7 0 24 0 20 18 -1.70530257e-13 16"></polygon></g><polygon id="Rectangle-Copy-18" fill="#F8F9FB" transform="translate(66.000000, 51.500000) scale(-1, 1) translate(-66.000000, -51.500000) " points="62 45 79 45 70 58 53 58"></polygon></g></g></g></svg>
                <span style="margin: 0;-size: 14px;color: #909399;">暂无节点配置</span>
              </div>
              <div class="per" v-if="showType == '部门审批'||showType == '方案确认'||showType == '领导审批'">
                <span v-for="item in perList" :key="item.userName">{{item.userName}}、</span>
              </div>
            </div>
          </div>
        </el-dialog>
        <el-dialog title="复制模板" :visible.sync="dialogVisible" width="32%" append-to-body>
          <el-form ref="formcopy" :rules="rulescopy" :model="formcopy" label-width="120px">
            <el-form-item label="模板名称" style="width: 420px" prop="templateNamecopy">
              <el-input v-model="formcopy.templateNamecopy"></el-input>
            </el-form-item>
            <el-form-item label="模板选择" prop="per">
              <el-select v-model="formcopy.tempId" placeholder="请选择模板" class="xiaLa" style="width: 300px" >
                <el-option v-for="(item,index) in tempData" :key="index" :label="item.templateName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFormcopy('formcopy')"
                >确 定</el-button
                >
                <el-button @click="backBtn">取 消</el-button>
                </span>
        </el-dialog>
      </div>
    </basic-container>
    <sortingPerChooseDialog
      :sortingPerChooseDialogData="sortingPerChooseDialogData"
      @sortingPerChooseDialogChild="sortingPerChooseDialogChild"
    ></sortingPerChooseDialog>
  </div>
</template>
<script>
import {getTempList,tempage,saveTemplateName,isExsitTemplateName,
  saveTemplatehang,effective,deleteBatchtem,copyTemplateMainAndDetail,putObjstateChange } from "@/api/bonus/jjtemplate"
import sortingPerChooseDialog from '@/views/bonusmanage/activiti/template/sortingPerChooseDialog.vue'
export default {
  components: {
    sortingPerChooseDialog
  },
  data(){
    return{
      nameTableData:[],
      tableData:[],
      tempData:[],
      formcopy: {},
      dialogVisible: false,
      perList:[],
      ruleForm:{
        templateName:"",
      },
      disabled:false,
      sortingPerChooseDialogData:{},
      loading:false,
      options:[
        {label:'是',value:"1"},
        {label:'否',value:"0"},
      ],
      wboptions:[
        {label:'会签',value:"1"},
        {label:'顺序签',value:"0"},
      ],
      id:"",
      from1:{},
      from4:{},
      from5:{},
      from6:{},
      rulescopy: {
        templateNamecopy: [
          { required: true, message: "请输入模板名称", trigger: "blur" },
        ],

      },
      rules:{
        templateName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
        ],
      },
      checked:false,
      showType:"",
      mbstepsDialogVisible:false,
      dialogtitle:"",
      fullscreenLoading2:false,
      loading:false,
      innerVisible:false,
      detailForm:{},
    }
  },
  watch:{

  },
  created(){
    this.getemNameList();
    this.from1 = {};
    this.from4 = {};
    this.from5 = {};
    this.from6 = {};
    this.id = "";
  },
  methods:{
    newBtn(){
      this.dialogtitle = "新增"
      this.tableData = [];
      this.id = "";
      this.from1 = {};
      this.from4 = {};
      this.from5 = {};
      this.from6 = {};
      this.ruleForm = {};
      this.mbstepsDialogVisible = true;
      this.showType = "";
    },
    copyBtn() {
      this.dialogVisible = true;
      this.formcopy = {};
      effective({
        tagName:"奖金测算"
      }).then((res) => {
        this.tempData = res.data.data;
        this.$forceUpdate;
      });
    },
    copyBtnDtail(){
      this.ruleForm = {};
      this.innerVisible = true;
    },
    detailCopy(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          isExsitTemplateName({
            templateName:this.detailForm.templateName,
            tagName:"奖金测算"
          }).then((res)=>{
            if(!res.data.data.flag){
              var parmas={
                newtempName:this.detailForm.templateName,
                oldId:this.id,
              }
              this.save(parmas)
            }else{
              this.$message.warning("模板名称已存在")
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    backBtn(){
      this.dialogVisible = false;
      this.innerVisible = false;
      this.formcopy = {};
      this.tempData = [];

    },
    // 节点编辑
    editmbsteps(e){
      this.showType = e;
      if(e =='部门审批'){
        this.perList = JSON.parse(this.from1.userjson).reverse()
      }
      else if(e =='领导审批'){
        this.perList = JSON.parse(this.from4.userjson).reverse()
      }
      else if(e =='方案确认'){
        this.perList = JSON.parse(this.from5.userjson).reverse()
      }
    },
    valueChange(e){
      console.log(e)
      var row = {};
      if(e.stepName == '部门审批'){
        row = this.from1;
      }else if(e.stepName == '领导审批'){
        row = this.from4;
        /*if(this.from4.isjump == false){
          this.disabled = true;
          this.from5.isjump = true;
          saveTemplatehang(this.from5).then((res)=>{
            this.fngetTempList()
          })
        }else{
          this.disabled = false;
        }*/
      }else if(e.stepName == '方案确认'){
        row = this.from5;
      }
      else if(e.stepName == '考核委员会审核'){
        row = this.from6;
      }
      if(row.isjump == false){
        row.isjump = true;
      }else{
        row.isjump = false;
      }
      this.savetem(row)
    },
    savetem(row){
      saveTemplatehang(row).then((res)=>{
        this.$message.closeAll();
        this.$message.success(row.stepName + '保存成功');
        this.fngetTempList()
      }).catch(res=>{
      })
    },
    submitFormcopy(formName) {
      var parmas={
        newtempName:this.formcopy.templateNamecopy,
        oldId:this.formcopy.tempId,
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          isExsitTemplateName({
            templateName:this.formcopy.templateNamecopy,
            tagName:"奖金测算"
          }).then((res)=>{
            console.log(res.data.data.flag);
            if(res.data.data.flag){
              this.$message.closeAll();
              this.$message.warning("模板名称"+this.formcopy.templateNamecopy+"已存在");
            }else{
              this.save(parmas)
            }
          })
        } else {
          return false;
        }
      });
    },
    save(parmas){
      copyTemplateMainAndDetail(parmas).then((response)=>{
        if(response.data.code == 0){
          this.$message.closeAll();
          this.$message.success(response.data.data);
          this.backBtn();
          this.getemNameList();
        }
      })
    },
    // 新增模板
    submitForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          isExsitTemplateName({
            templateName:this.ruleForm.templateName,
            tagName:"奖金测算"
          }).then((res)=>{
            if(!res.data.data.flag){
              saveTemplateName({
                templateName:this.ruleForm.templateName,
                id:this.id,
                tagName:"奖金测算"
              }).then((res)=>{
                this.id = res.data.data.id;
                this.fngetTempList(res.data.data);
                this.getemNameList();
              })
            }else{
              this.$message.warning("模板名称已存在")
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //获取模板列表
    getemNameList(){
      this.loadingFrom = true;
      tempage({
        tagName:"奖金测算"
      }).then((res)=>{
        this.loadingFrom = false;
        this.nameTableData = res.data.data.records;
        this.showType = "请点击节点进行配置"
      })
    },
    // 模板提交至有效
    saveBtn(){
      var params = {
        isEffective:1,
        id:this.id,
        tagName:"奖金测算"
      }
      if(this.from1.isjump == true&&(JSON.parse(this.from1.userjson).length==0||this.from1.tagType == null)){
        this.$message.warning("请完成“部门审批”节点的配置")
      }
      else if(this.from4.isjump == true&&JSON.parse(this.from4.userjson).length==0){
        this.$message.warning("请完成“领导审批”节点的配置")
      }
      else if(JSON.parse(this.from5.userjson).length==0){
        this.$message.warning("请完成“方案确认”节点的配置")
      }
      /*else if(this.from6.isjump == true&&this.from6.isauto == null){
        this.$message.warning("请完成“考核委员会审核”节点的配置")
      }*/
      else{
        this.fullscreenLoading2 = true;
        saveTemplateName(params).then((res)=>{
          this.$message.success('提交成功');
          this.fullscreenLoading2 = false;
          this.getemNameList();
          this.mbstepsDialogVisible = false;
        }).catch(res=>{
          this.fullscreenLoading2 = false;
        })
      }
    },

    edit(row){
      this.dialogtitle = row.templateName;
      this.ruleForm.templateName = row.templateName
      this.id = row.id;
      this.showType = "请点击节点进行配置";
      this.fngetTempList();
    },
    // 编辑
    fngetTempList(){
      var params ={
        mainId:this.id
      }
      this.loading = true;
      getTempList(params).then((res)=>{
        this.tableData = res.data.data;
        this.mbstepsDialogVisible = true;
        this.from1 = res.data.data[0];
        console.log("this.from1:",this.from1)
        if(this.from1.isjump == 'false'){
          this.from1.isjump = true;
        }else{
          this.from1.isjump = false;
        }
        this.from4 = res.data.data[1];
        if(this.from4.isjump == 'false'){
          this.from4.isjump = true
        }else{
          this.disabled = true;
          this.from4.isjump = false;
        }
        this.from5 = res.data.data[2];
        if(this.from5.isjump == 'false'){
          this.from5.isjump = true;
        }else{
          this.from5.isjump = false;
        }
        // this.from6 = res.data.data[3];
        // if(this.from6.isjump == 'false'){
        //   this.from6.isjump = true;
        // }else{
        //   this.from6.isjump = false;
        // }


        this.loading = false;
      }).catch(()=>{
        this.loading = false;
      })
    },
    delBtn(row){
      var params = {
        ids:row.id
      }
      this.$confirm('确定要删除么？', "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(_ => {
        deleteBatchtem(params).then((res)=>{
          this.$message.success('删除成功');
          this.getemNameList()
        })
      }).catch(_ => {
      });
    },
    choosePer(row){
      console.log('row',row)
      this.sortingPerChooseDialogData = {
        visible:true,
        rows:row,
        perLsit:JSON.parse(row.userjson).reverse(),
        types:"jjcs",
      }
    },
    sortingPerChooseDialogChild(res){
      this.fngetTempList();
      this.editmbsteps(this.showType)
    },
    stateChange: function (row) {
      var params = {
        id: row.id,
        isZmb: row.isZmb,
      };
      putObjstateChange(params)
        .then((data) => {
          console.log(data)
          if (data.data.code == 0 ) {
            this.$message.success("操作成功");
            this.getemNameList();
          } else {
            this.$message.warning(data.data.msg);

            this.getemNameList();
          }


        })
        .catch(() => {
          // loading();
        });
    },
    searchChange(form, done) {
      this.searchForm = form;
      this.page.currentPage = 1;
      this.getList(this.page, form);
      done();
    },
  }

}
</script>
<style scoped>
.tiao_lc{
  width: 100%;
  background: #eeeeee;
  padding: 10px;
  color:#0762c3;
}
.text_dh{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mb_bottom{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 230px;
}
.bg_tiao{
  width: 100%;
  background: #a9c6ea;
  height: 4px;
  top: 45px;
  position: relative;
  z-index: 2;
}
.bg_tiaoTwo{
  width: 69%;
  background: #a9c6ea;
  height: 4px;
  top: 65px;
  position: relative;
  z-index: 2;
}
.point{
  width: 31px;
  height: 31px;
  margin: 0 3px 6px 3px;
  border-radius: 50%;
  background: #dbe2f2;
  box-shadow: 4px 4px 6px #888888;
}
.chenck_active{
  width: 31px;
  height: 31px;
  margin: 0 3px 6px 3px;
  border-radius: 50%;
  background: #0a66c2;
  box-shadow: 4px 4px 6px #888888;
  text-align: center;
}
.chenck_active2{
  width: 31px;
  height: 31px;
  margin: 0 3px 6px 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 4px 4px 6px #888888;
  text-align: center;
}
.imgs{
  width: 31px;
  height: 31px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 4px 4px 6px #888888;
}
.checked{
  font-size:20px;
  border-radius: 50%;
  color: #0a66c2;
  line-height: 31px;
  background:#fff;
}
.checked2{
  color:#fff;
  font-size:20px;
  line-height: 31px;
  text-align: center;
  background: #0a66c2;
  border-radius: 50%;
}
.per{
  width: 80%;
  height: 84px;
  border-radius: 5px;
  border: 2px #ededf1 solid;
  padding: 20px;
}
</style>
